<template>
  <div id='page-confirmOrder'>    
    <top-header title='确认订单'></top-header>
    <time-line :process-number='2'></time-line>
    <div class="teacher-info" v-if='orderInfo'>
      <img :src="orderInfo.thumb_img" alt="大师头像"  class="teacher-header">
      <div class="teacher-order">
        <p class="teacher-name">{{orderInfo.master_name}}</p>
        <p class="teacher-type">咨询内容：{{orderInfo.type_name}}</p>
        <p class="teacher-tip">(若有问题补充，则可在支付之后进行填写)</p>
      </div>
    </div>
    <div class="order-info"  v-if='orderInfo'>
      <div class="order-info-cell">
        <p class="order-info-title">订单金额</p>
        <p class="order-info-money">￥{{orderInfo.fee}}</p>
      </div>
      <div class="order-info-cell" v-if='orderInfo.r_price > 0'>
        <p class="order-info-newIcon">新</p>
        <p class="order-info-title">新客立减:</p>
        <p class="order-info-discount">-￥{{orderInfo.r_price}}</p>
      </div>
    </div>

    <div class="order-payContent">
      <p class="order-payTip">支付成功后，代表你同意了
        <span class="order-userxy" @click ="toUserAgreement()">《用户协议》</span>和
        <span class="order-userxy" @click ="toUserPrivacy()">《隐私政策》</span>。
      </p>
      <div class="order-payInfo">
        <div class="order-money" v-if='orderInfo'>
          合计：¥{{orderInfo.fee}} <span class="order-payDiscount" v-if='orderInfo.r_price > 0'>（已优惠¥{{orderInfo.r_price}}）</span>
        </div>
        <button class="order-payBtn" @click='Alipays(curPayType)'>立即支付</button>
      </div>
    </div>
    <!-- 支付组件 -->
    <pay @get-type='curPayType = $event'/>

    <div class="goalipay_box" style="display:none" v-html="goalipayHtml"></div>
    
  </div>
</template>

<script>
  import topHeader from '@/components/topHeader';
  import timeLine from '@/components/timeLine';
  import Pay from '@/components/pay';
  import toolFn from '@/assets/js/tool.js';

  export default {
    props:[],
    components:{
      topHeader,
      timeLine,
      Pay
    },
    data:function(){
      return {
        curPayType:0,  //当前的支付方式。0表示第一种，1表示第二种
        ordercode:'', //订单号
        goalipayHtml:'',
        orderInfo: false, //订单信息
      }
    },
    created:function(){
      this.ordercode = this.$route.query.ordercode
      this.getData(this.$route.query.ordercode)
    },
    methods:{
      Alipays(curPayType){
        let mid = this.$route.query.mid
        this.$store.commit('setMid', mid)
        toolFn.Alipay(this,curPayType,this.ordercode)
      },
      getData:function(ordercode){
        this.$fetch.post('/v1/AddOrder/gopay',{
          ordercode:ordercode
        })
        .then((res) => {
          this.orderInfo = res.data;
        })
      },
      goToPay:function(){
        this.$route.push({
          name:'z_editUserInfo',
          params: {
            ordercode: this.ordercode,
            mid: this.$route.query.mid
          }
        });
      },
      //跳转
      gotoPath:function(url){
        this.$router.push(url)
      },
      // 跳转用户协议
      toUserAgreement(){
        this.$router.push('/userAgreement')
      },
      // 跳转隐私界面
      toUserPrivacy() {
        this.$router.push('/userPrivacy')
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/public.less';
  @import './index.less';
</style>